<template>
	<view>
		<scroll-view class="waitsScroll" scroll-y="true">
			<view class="" style="height: 40upx;">

			</view>
			<view class="qrcodes">

				<view class="qrcodes_2">
					<view class="qrcodes_3zt">
						票数:<text
							style="color: #4374eb;font-size: 28upx;font-weight: 500;margin: 0 10upx;">{{form.seatSum}}</text>
						张

					</view>
					<view class="qrcodes_2xt">
						<canvas v-show="form.status==1" canvas-id="qrcode"
							style="width: 250px;height:250px;margin: 0 auto;" />
					</view>
					<view class="qrcodes_2ut" @click="shuaxin">
						<text class="iconfont iconbangzhu"></text>动态码定时更新，请勿截图，以免影响正常使用
					</view>
					<view class="qrcodes_2zt">
					</view>

					<view class="titlse_6">
						<view class="MyOrder_1x">
							<view class="MyOrder_1x_1">
								{{form.departDate||''}} {{form.departTime||''}} 发车
							</view>
						</view>
						<view class="MyOrder_1y">
							<view class="MyOrder_1y_2">
								<view class="MyOrder_1y_2x">
									<text class="MyOrder_1y_2x-1x"></text>
									<text class="MyOrder_1y_2x-1ys">{{form.address||''}} </text>
								</view>
								<view class="MyOrder_1y_2x">
									<text class="MyOrder_1y_2y-1y"></text>
									<text class="MyOrder_1y_2x-1ys">{{form.priceAddress||''}} </text>
								</view>
							</view>

						</view>

						<view class="titlse_3">
							<text class="icongantanhao-yuankuang iconfont"></text>为保证正常出行，请您提前10分钟到站候车。
						</view>
					</view>
					<view class="disbuxs">
						<view class="disbu">
							<view class="disbu1">
								<view class="disbu1-2">
									乘车人
								</view>
							</view>
							<view class="disbu1 xjjhhd">
								<view class="disbu1-2">
									票价类型
								</view>
							</view>
							<view class="disbu1">
								<view class="disbu1-2">
									座位号
								</view>
							</view>
						</view>
						<view class="disbu" v-for="(item,index) in form.ddOrderDetailList" :key="index">
							<view class="disbu1">
								<view class="disbu1-1">
									{{item.name}}
								</view>
							</view>
							<view class="disbu1 xjjhhd">
								<view class="disbu1-1">
									全票
								</view>
							</view>
							<view class="disbu1">
								<view class="disbu1-1">
									{{item.seat}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="qrcodes_1">
					<view class="qrcodes_1l">

					</view>
					<view class="qrcodes_1r">

					</view>
					<view class="qrcodes_1x">
						{{form.vehicle||''}}
					</view>
					<view class="qrcodes_1y">
						班次号：{{form.code||''}}
					</view>
				</view>
			</view>
			<view class="" style="height: 40upx;">

			</view>
		</scroll-view>
	</view>
</template>

<script>
	import uQRCode from '@/static/js/uqrcode.js'
	export default {
		data() {
			return {
				form: {},

			}
		},
		onLoad(option) {
			this.form = JSON.parse(decodeURIComponent(option.id))
			if (this.form.status == 1) {
				var obj = JSON.parse(decodeURIComponent(option.id))
				var datas = {
					address: obj.address,
					startPoint: obj.startPoint,
					endPoint: obj.endPoint,
					seat: obj.seat,
					departTime: obj.departTime,
					departDate: obj.departDate,
					createDate: obj.createDate,
					seatSum: obj.seatSum,
					priceSum: obj.priceSum,
					id: obj.id,
					plandateId: obj.plandateId
				}
				var datasA = JSON.stringify(datas)
				this.make(datasA)
			}
		},
		methods: {
			async make(e) {
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				uQRCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: e,
					size: 250,
					margin: 10,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					correctLevel: uQRCode.errorCorrectLevel.H,
					success: res => {
						uni.hideLoading();
					}
				})


			}
		}
	}
</script>

<style scoped lang="scss">
	.natvre {
		background-color: #3478f6;
		padding: 20upx;
		margin-top: 10upx;
		position: relative;
		margin-bottom: 30upx;
		box-sizing: border-box;
	}

	.fide-right {
		position: absolute;
		display: inline-block;
		height: 28rpx;
		width: 28rpx;
		background: #fff;
		top: -8rpx;
		border-radius: 50%;
		left: -8rpx;
	}

	.fide-left {
		position: absolute;
		display: inline-block;
		height: 28rpx;
		width: 28rpx;
		background: #fff;
		top: -8rpx;
		border-radius: 50%;
		right: -8rpx;
	}

	.natvre1 {
		line-height: 60upx;
		font-size: 32upx;
		color: #fff;
	}

	.natvre2 {
		line-height: 60upx;
		font-size: 28upx;
		color: #fff;

	}

	.piao {
		margin-bottom: 30upx;
	}

	.piao1 {
		font-size: 28upx;
		line-height: 60upx;
		margin-top: 30upx;
		font-weight: 550;
		text-align: center;
	}

	.disbuxs {
		padding: 20upx 0;
	}

	.disbu {
		display: flex;
		font-size: 28upx;
	}

	.disbu1 {
		flex: 1;
		text-align: center;
	}

	.disbu1-1 {
		color: #6C6C6C;
		line-height: 60upx;
	}

	.disbu1-2 {
		line-height: 60upx;
		font-weight: 550;
	}



	.waitsScroll {
		height: 100vh;
		background-color: #f7f7f7;
	}

	.qrcodes {
		margin: 0 40upx;
		background-color: #fff;
		border-radius: 16upx;

	}

	.qrcodes_2 {
		padding: 30upx;

		.qrcodes_2xt {
			display: flex;
			height: 460upx;
			align-items: center;
			justify-content: center;
			overflow: hidden;
			position: relative;

		}

		.qrcodes_2zt {
			height: 40upx;
		}

		.qrcodes_2ut {
			justify-content: center;
			font-size: 26upx;
			display: flex;
			align-items: center;
			padding-top: 25upx;
		}

		.qrcodes_3zt {
			justify-content: center;
			font-size: 28upx;
			display: flex;
			align-items: center;
			margin-bottom: 30upx;
		}

		.titlse_6 {
			background-color: #f7f7f7;
			padding: 25upx;
			border-radius: 16upx;

			.titlse_3 {
				font-size: 26upx;
				color: orange;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				margin-top: 30upx;

				.icongantanhao-yuankuang {
					font-size: 32upx;
					color: orange;

				}
			}

			.MyOrder_1x {
				font-size: 30upx;
				font-weight: 500;
				display: flex;
				align-items: center;

			}

			.MyOrder_1y {
				display: flex;
				align-items: center;
				margin-top: 5upx;

				.MyOrder_1y_2 {
					.MyOrder_1y_2x {
						font-size: 28upx;
						display: flex;
						align-items: center;
						margin-top: 10upx;

						.MyOrder_1y_2x-1x {
							width: 16upx;
							height: 16upx;
							background: #61d34e;
							border-radius: 50%;
							border: 6upx solid #dff6dc;
							margin-right: 10upx;
						}

						.MyOrder_1y_2y-1y {
							width: 16upx;
							height: 16upx;
							background: #f3b158;
							border-radius: 50%;
							border: 6upx solid #fcefdd;
							margin-right: 10upx;
						}


					}
				}
			}
		}
	}

	.qrcodes_1 {
		height: 100upx;
		border-top: 2upx dashed #ccc;
		position: relative;
		font-size: 30upx;
		display: flex;
		align-items: center;
		padding: 0 30upx;

		.qrcodes_1l {
			width: 40upx;
			height: 40upx;
			border-radius: 50%;
			background-color: #f7f7f7;
			position: absolute;
			top: -20upx;
			left: -20upx;
		}

		.qrcodes_1r {
			width: 40upx;
			height: 40upx;
			border-radius: 50%;
			background-color: #f7f7f7;
			position: absolute;
			top: -20upx;
			right: -20upx;
		}

		.qrcodes_1y {
			margin-left: auto;
			display: flex;
			align-items: center;
			color: #4374eb;

			.iconlvzhou_wifi {
				font-size: 28upx;
				margin-right: 8upx;
			}
		}

		.qrcodes_1x {
			font-weight: 500;
		}
	}
</style>